<template>
  <div class="top-navigation">
    <div class="package-container">
      <!-- 组织架构管理 -->
      <div v-if="showOrganizationSection">
        <h3 class="package-heading">组织架构管理</h3>
        <div class="package-tab-wrapper">
          <input type="radio" id="tab-1" class="input" :checked="$route.name === 'DepartmentManagement'" />
          <label for="tab-1" class="package-tab" @click="navigateTo('DepartmentManagement')">部门管理</label>
          
          <input type="radio" id="tab-2" class="input" :checked="$route.name === 'ApplicationManagement'" />
          <label for="tab-2" class="package-tab" @click="navigateTo('ApplicationManagement')">应用管理</label>
          
          <input type="radio" id="tab-3" class="input" :checked="$route.name === 'UserManagement'" />
          <label for="tab-3" class="package-tab" @click="navigateTo('UserManagement')">用户管理</label>
        </div>
      </div>

      <!-- 任务角色管理 -->
      <div v-if="showTaskRoleSection">
        <h3 class="package-heading">任务角色管理</h3>
        <div class="package-tab-wrapper">
          <input type="radio" id="tab-4" class="input" :checked="$route.name === 'RoleDefinition'" />
          <label for="tab-4" class="package-tab" @click="navigateTo('RoleDefinition')">角色定义</label>
          
          <input type="radio" id="tab-5" class="input" :checked="$route.name === 'RouteFieldConfiguration'" />
          <label for="tab-5" class="package-tab" @click="navigateTo('RouteFieldConfiguration')">路由字段配置</label>
          
          <input type="radio" id="tab-6" class="input" :checked="$route.name === 'RoleRouteManagement'" />
          <label for="tab-6" class="package-tab" @click="navigateTo('RoleRouteManagement')">角色路由管理</label>

          <input type="radio" id="tab-7" class="input" :checked="$route.name === 'RoutingRules'" />
          <label for="tab-7" class="package-tab" @click="navigateTo('RoutingRules')">路由规则</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 定义组件属性，控制显示哪些导航区域
const props = defineProps({
  showOrganizationSection: {
    type: Boolean,
    default: true
  },
  showTaskRoleSection: {
    type: Boolean,
    default: true
  },
  showRoleRouteSection: {
    type: Boolean,
    default: true
  },
  showDataSourceSection: {
    type: Boolean,
    default: true
  },
  showFormDesignerSection: {
    type: Boolean,
    default: true
  }
});

// 导航到指定路由
const navigateTo = (routeName) => {
  router.push({ name: routeName });
};
</script>

<style scoped>
/* 引入用户提供的样式并适配项目 */
.package-container {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  font-family: "Poppins", sans-serif;
  --primary-color: #6366f1; /* 与最上端横幅一致的紫色 */
  --secondary-color: #6366f1; /* 与最上端横幅一致的紫色 */
  --tab-text-color: #ffffff;
  --tab-bg-color: #f8f9fa;
  --hover-bg-color: #e9ecef;
  max-width: 70%;
  margin-left: 24px;
}

.package-heading {
  font-size: 15px;
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 6px;
  padding-left: 0;
}

.package-tab-wrapper {
  display: flex;
  align-items: center;
  column-gap: 6px;
  border-radius: 6px;
  border: 1px solid var(--primary-color);
  padding: 4px;
  margin-left: 0;
  margin-right: 0;
  flex-wrap: wrap;
}

.package-tab-wrapper .input {
  display: none;
}

.package-tab {
  flex: 1 1 100px;
  min-width: max-content;
  text-align: center;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 12px;
  background: var(--tab-bg-color);
  color: var(--secondary-color);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.package-tab:hover {
  background-color: var(--hover-bg-color);
  transform: translateY(-1px);
}

.package-tab:active {
  transform: scale(0.9);
}

.input:checked + label.package-tab {
  background: var(--primary-color);
  color: var(--tab-text-color);
  box-shadow: 0px 0px 12px 0px rgba(99, 102, 241, 0.4);
  transform: translateY(0);
}

/* 确保与页面整体样式协调 */
.top-navigation {
  background-color: transparent;
  border-bottom: none;
  padding: var(--spacing-lg) 0;
  margin-bottom: var(--spacing-xl);
  box-shadow: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .package-tab-wrapper {
    margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
    flex-direction: column;
    align-items: stretch;
    row-gap: 8px;
  }
  
  .package-tab {
    flex: 1 1 100%;
  }
  
  .package-heading {
    padding-left: var(--spacing-lg);
    font-size: 14px;
  }
}

/* 适配项目已有的CSS变量 */
:root {
  --primary-color: #6366f1;
  --secondary-color: #6366f1;
}
</style>